
<template>
	<!-- 考勤-新增请假 -->
	<div>
		<el-row>
			<span class="formLable">基本信息</span>
		</el-row>
		<el-row :gutter="16">
			<el-col :span="4">
				<span class="formLable">学员：</span>
			</el-col>
			<el-col :span="4">
				<span class="formValue">{{studentInfo.realName}}</span>
			</el-col>
			<el-col :span="4">
				<span class="formLable">监护人：</span>
			</el-col>
			<el-col :span="4">
				<span class="formValue">罗琴</span>
			</el-col>
			<el-col :span="4">
				<span class="formLable">联系电话：</span>
			</el-col>
			<el-col :span="4">
				<span class="formValue">{{studentInfo.phone}}</span>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="4">
				<span class="formLable">所在班级：</span>
			</el-col>
			<el-col :span="8">
				<span class="formValue">年级 班级</span>
			</el-col>
		</el-row>
		<el-row :gutter="16">
			<el-col :span="4">
				<span class="formLable">请假类型：</span>
			</el-col>
			<el-col :span="20">
				<el-radio-group v-model="saveParam.signMode">
					<el-radio :label="3">病假</el-radio>
					<el-radio :label="6">事假</el-radio>
				</el-radio-group>
			</el-col>
		</el-row>
		<el-row :gutter="16">
			<el-col :span="4">
				<span class="formLable">请假时间：</span>
			</el-col>
			<el-col :span="20">
				<el-date-picker
					v-model="selectDate"
					@change="changeDate"
					type="daterange"
					range-separator="-"
					start-placeholder="开始日期"
					end-placeholder="结束日期">
				</el-date-picker>
			</el-col>
		</el-row>
		<el-row :gutter="16" v-if="daySpan">
			<el-col :span="4">
				<span class="formLable">请假天数：</span>
			</el-col>
			<el-col :span="20">
				<span class="formLable">共{{daySpan}}天</span>
			</el-col>
		</el-row>
		<el-row>
			<el-row>
				<el-col :span="4">
					<span class="formLable">原因备注：</span>
				</el-col>
				<el-col :span="20">
					<el-input
						type="textarea"
						placeholder="请输入内容"
						v-model="saveParam.remark"
						maxlength="100"
						:rows="4"
						show-word-limit
						>
					</el-input>
				</el-col>
			</el-row>
			<el-row style="text-align:center;">
				<el-button @click="cancle">取消</el-button>
				<el-button @click="save">确定请假</el-button>
			</el-row>
		</el-row>
		
	</div>
</template>

<script>
	let vm;
	export default{
		components:{},
		data(){
			return {
				saveParam:{
					signMode:'',
					remark:'',
					startTime:'',
					endTime:'',
				},
				selectDate:null,
				daySpan:null,
				studentInfo:{},
			}
		},
		methods:{
			init(data){
				this.studentInfo=data;
			},
			cancle(){
				this.$emit('cancle',false);
			},
			save(){
				
				this.$emit('cancle',false);
			},
			changeDate(val){
				if(!val){this.daySpan=null;return;}
				this.daySpan=tool.DaySpan(val[0],val[1]);

			},
		},
		mounted(){
			vm=this;
		},
		computed:{
			
		},
		watch:{

		}
	}
</script>

<style lang="scss" scoped>
	.formLable,.formValue{
		font-size: 0.16rem;
		line-height: 0.4rem;
	}
	.formLable.must::before{
		content: '*';
		color: red;
		margin: 0 0.05rem;
	}
	.el-row{
		margin-bottom: 0.16rem;
	}
	.el-checkbox{
		font-size: 0.16rem;
		line-height: 0.4rem;
	}
	.el-radio{
		font-size: 0.16rem;
		line-height: 0.4rem;
	}
</style>
